<template>
  <div ref="pieChart12" class="pie-chart-12 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";
import "echarts-gl";

const pieChart12 = ref(null);
const echarts = inject("$echarts");


// 参数
const seriesData = [
  {
    name: '入侵报警',//名称
    value: 26,//值
    itemStyle: {//颜色
      color: '#008fd8'
    }
  }, {
    name: '门禁报警',
    value: 18,
    itemStyle: {
      color: '#e99d77',
    }
  }, {
    name: '消防报警',
    value: 15,
    itemStyle: {
      color: '#21e1f1'
    }
  },
];

//配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
function getPie3D(pieData, internalDiameterRatio) {
  let series = [];
  let sumValue = 0;
  let startValue = 0;
  let endValue = 0;
  let legendData = [];
  let legendBfb = [];
  let k = 1 - internalDiameterRatio;
  pieData.sort((a, b) => {
    return (b.value - a.value);
  });
  // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
  for (let i = 0; i < pieData.length; i++) {
    sumValue += pieData[i].value;
    let seriesItem = {
      //系统名称
      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
      type: 'surface',
      //是否为参数曲面（是）
      parametric: true,
      //曲面图网格线（否）上面一根一根的
      wireframe: {
        show: false
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: false,
        k: k
      },
      //设置饼图在容器中的位置(目前没发现啥用)
      //   center: ['50%', '100%']
    };

    //曲面的颜色、不透明度等样式。
    if (typeof pieData[i].itemStyle != 'undefined') {
      let itemStyle = {};
      typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
      typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
      seriesItem.itemStyle = itemStyle;
    }
    series.push(seriesItem);
  }

  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  legendData = [];
  legendBfb = [];
  for (let i = 0; i < series.length; i++) {
    endValue = startValue + series[i].pieData.value;
    series[i].pieData.startRatio = startValue / sumValue;
    series[i].pieData.endRatio = endValue / sumValue;
    series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
      false, false, k, series[i].pieData.value);
    startValue = endValue;
    let bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
    legendData.push({
      name: series[i].name,
      value: bfb
    });
    legendBfb.push({
      name: series[i].name,
      value: bfb
    });
  }
  //(第二个参数可以设置你这个环形的高低程度)
  let boxHeight = getHeight3D(series, 15);//通过传参设定3d饼/环的高度
  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  let option = {
    compCode: 'C202310004',
    backgroundColor: 'black',
    //图例组件
    legend: {
      data: legendData,
      //图例列表的布局朝向。
      orient: 'vertical',
      right: 30,
      top: 140,
      //图例文字每项之间的间隔
      itemGap: 15,
      textStyle: {
        color: '#fff',
      },
      show: false,
      icon: "circle",
      //格式化图例文本（我是数值什么显示什么）
      // formatter: function (name) {
      //   let target;
      //   for (let i = 0, l = pieData.length; i < l; i++) {
      //     if (pieData[i].name == name) {
      //       target = pieData[i].value;
      //     }
      //   }
      //   return `${name}: ${target}`;
      // }
      // 这个可以显示百分比那种（可以根据你想要的来配置）
      formatter: function (param) {
        let target;
        for (let i = 0, l = pieData.length; i < l; i++) {
          if (pieData[i].name == param) {
            target = pieData[i].value;
          }
        }
        let item = legendBfb.filter(item => item.name == param)[0];
        let bfs = fomatFloat(item.value * 100, 2) + "%";
        return `${item.name}  ${target}  ${bfs}`;
      }
    },
    tooltip: {
      backgroundColor: '#053962',
      borderColor: '#165e9e',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      },
      formatter: function(params) {
        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
          // 直接从 pieData 中获取数据
          let target;
          for (let i = 0; i < seriesData.length; i++) {
            if (seriesData[i].name === params.seriesName) {
              target = seriesData[i].value;
            }
          }
          
          // 计算百分比
          let total = seriesData.reduce((sum, item) => sum + item.value, 0);
          let percentage = ((target / total) * 100).toFixed(2);

          return `${params.seriesName}<br/>` +
            `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
            `${target} ${percentage}%`;
        }
      }
    },
    //这个可以变形
    xAxis3D: {
      min: -1,
      max: 1
    },
    yAxis3D: {
      min: -1,
      max: 1
    },
    zAxis3D: {
      min: -1,
      max: 1
    },
    //此处是修改样式的重点
    grid3D: {
      show: false,
      boxHeight: boxHeight, //圆环的高度
      //这是饼图的位置
      top: '-20.5%',
      left: '0%',
      viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
        alpha: 30, //角度(这个很重要 调节角度的)
        distance: 400,//调整视角到主体的距离，类似调整zoom(这是整体大小)
        rotateSensitivity: 0, //设置为0无法旋转
        zoomSensitivity: 0, //设置为0无法缩放
        panSensitivity: 0, //设置为0无法平移
        autoRotate: false //自动旋转
      }
    },
    series: series
  };
  return option;
};

//获取3d丙图的最高扇区的高度
function getHeight3D(series, height) {
  series.sort((a, b) => {
    return (b.pieData.value - a.pieData.value);
  })
  return height * 25 / series[0].pieData.value;
};

// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
  // 计算
  let midRatio = (startRatio + endRatio) / 2;
  let startRadian = startRatio * Math.PI * 2;
  let endRadian = endRatio * Math.PI * 2;
  let midRadian = midRatio * Math.PI * 2;
  // 如果只有一个扇形，则不实现选中效果。
  if (startRatio === 0 && endRatio === 1) {
    isSelected = false;
  }
  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = typeof k !== 'undefined' ? k : 1 / 3;
  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  let hoverRate = isHovered ? 1.05 : 1;
  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32
    },
    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20
    },
    x: function (u, v) {
      if (u < startRadian) {
        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    },
    y: function (u, v) {
      if (u < startRadian) {
        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    },
    z: function (u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u) * h * .1;
      }
      return Math.sin(v) > 0 ? 1 * h * .1 : -1;
    }
  };
};

//这是一个自定义计算的方法
function fomatFloat(num, n) {
  let f = parseFloat(num);
  if (isNaN(f)) {
    return false;
  }
  f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
  let s = f.toString();
  let rs = s.indexOf('.');
  //判定如果是整数，增加小数点再补0
  if (rs < 0) {
    rs = s.length;
    s += '.';
  }
  while (s.length <= rs + n) {
    s += '0';
  }
  return s;
};

// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
function bindListen(myChart) {
  let selectedIndex = '';
  let hoveredIndex = '';
  
  // 监听点击事件，实现选中效果（单选）
  myChart.on('click', function (params) {
    // 确保 option 已定义
    const currentOption = myChart.getOption();
    
    // 检查是否是有效的系列
    if (!currentOption.series[params.seriesIndex] || 
        !currentOption.series[params.seriesIndex].pieStatus) {
      return;
    }

    // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
    let isSelected = !currentOption.series[params.seriesIndex].pieStatus.selected;
    let isHovered = currentOption.series[params.seriesIndex].pieStatus.hovered;
    let k = currentOption.series[params.seriesIndex].pieStatus.k;
    let startRatio = currentOption.series[params.seriesIndex].pieData.startRatio;
    let endRatio = currentOption.series[params.seriesIndex].pieData.endRatio;

    // 如果之前选中过其他扇形，将其取消选中
    if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
      currentOption.series[selectedIndex].parametricEquation = getParametricEquation(
        currentOption.series[selectedIndex].pieData.startRatio,
        currentOption.series[selectedIndex].pieData.endRatio,
        false,
        false,
        k,
        currentOption.series[selectedIndex].pieData.value
      );
      currentOption.series[selectedIndex].pieStatus.selected = false;
    }

    // 对当前点击的扇形，执行选中/取消选中操作
    currentOption.series[params.seriesIndex].parametricEquation = getParametricEquation(
      startRatio,
      endRatio,
      isSelected,
      isHovered,
      k,
      currentOption.series[params.seriesIndex].pieData.value
    );
    currentOption.series[params.seriesIndex].pieStatus.selected = isSelected;

    // 如果本次是选中操作，记录选中的扇形
    isSelected ? (selectedIndex = params.seriesIndex) : (selectedIndex = '');

    // 使用更新后的 option，渲染图表
    myChart.setOption(currentOption);
  });

  // mouseover 事件处理
  myChart.on('mouseover', function (params) {
    const currentOption = myChart.getOption();
    
    // 检查是否是有效的系列和必要的属性
    if (!currentOption.series[params.seriesIndex] || 
        !currentOption.series[params.seriesIndex].pieStatus ||
        !currentOption.series[params.seriesIndex].pieData ||
        params.seriesName === 'mouseoutSeries' || 
        params.seriesName === 'pie2d') {
      return;
    }

    // 如果触发 mouseover 的扇形当前已高亮，则不做操作
    if (hoveredIndex === params.seriesIndex) {
      return;
    }

    // 如果当前有高亮的扇形，取消其高亮状态
    if (hoveredIndex !== '' && 
        currentOption.series[hoveredIndex] && 
        currentOption.series[hoveredIndex].pieStatus) {
      
      let prevSeries = currentOption.series[hoveredIndex];
      prevSeries.parametricEquation = getParametricEquation(
        prevSeries.pieData.startRatio,
        prevSeries.pieData.endRatio,
        prevSeries.pieStatus.selected || false,
        false,
        prevSeries.pieStatus.k,
        prevSeries.pieData.value
      );
      prevSeries.pieStatus.hovered = false;
      hoveredIndex = '';
    }

    // 设置新的高亮扇形
    let currentSeries = currentOption.series[params.seriesIndex];
    currentSeries.parametricEquation = getParametricEquation(
      currentSeries.pieData.startRatio,
      currentSeries.pieData.endRatio,
      currentSeries.pieStatus.selected || false,
      true,
      currentSeries.pieStatus.k,
      currentSeries.pieData.value + 5
    );
    currentSeries.pieStatus.hovered = true;
    hoveredIndex = params.seriesIndex;

    // 更新图表
    myChart.setOption(currentOption);
  });

  // 修改 globalout 事件处理
  myChart.on('globalout', function () {
    const currentOption = myChart.getOption();
    
    if (hoveredIndex !== '' && 
        currentOption.series[hoveredIndex] && 
        currentOption.series[hoveredIndex].pieStatus) {
      
      let series = currentOption.series[hoveredIndex];
      series.parametricEquation = getParametricEquation(
        series.pieData.startRatio,
        series.pieData.endRatio,
        series.pieStatus.selected || false,
        false,
        series.pieStatus.k,
        series.pieData.value
      );
      series.pieStatus.hovered = false;
      hoveredIndex = '';
      
      myChart.setOption(currentOption);
    }
  });
};

let originOption = getPie3D(seriesData, 0);
originOption.series.push({
  backgroundColor: 'transparent',
  type: 'pie',
  labelLine: {
    length: 50,
    length2: 50
  },
  startAngle: -40, // 起始角度，支持范围[0, 360]。
  clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
  radius: ['20%', '40%'],
  center: ['50%', '28%'],
  data: seriesData,
  label: {
    opacity: 1,
    fontSize: 13,
    lineHeight: 20,
    formatter: '{c|{c}} {b|次} \n {b|{b}}',
    rich: {
      c: {
        color: '#008fd8',
        fontSize: 18,
        lineHeight: 24,
        height: 24
      },
      b: {
        color: "#fff",
        fontSize: 14,
        lineHeight: 20,
        align: 'left',
      }
    },
  },
  itemStyle: {
    opacity: 0  //这里必须是0，不然2d的图会覆盖在表面
  }
})

const option = originOption;




onMounted(() => {
  const chart = echarts.init(pieChart12.value);
  chart.setOption(option);
  bindListen(chart);
});
</script>
